<!DOCTYPE html>
<html>
 <head>
    <link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js/js-image-slider.js" type="text/javascript"></script>
    <style>.navBulletsWrapper{left:135px;}</style>
    <script type="text/javascript">
imageSlider.thumbnailPreview(function (thumbIndex) { return "<img src='images/Table/" + (thumbIndex + 1) + ".jpg' style='width:180px;height:120px;' />"; });
    </script>
</head>

<body>
 <div id="sliderFrame">

   <div id="slider">
             
       <img src="images/Table/1.jpg" alt="#htmlcaption1" />
       <img src="images/Table/2.jpg" alt="#htmlcaption2" />
       <img src="images/Table/3.jpg" alt="#htmlcaption3" />
       <img src="images/Table/4.jpg" alt="#htmlcaption4" />
       <img src="images/Table/5.jpg" alt="#htmlcaption5" />
       <img src="images/Table/6.jpg" alt="#htmlcaption6" />
       <img src="images/Table/7.jpg" alt="#htmlcaption7" />
       <img src="images/Table/8.jpg" alt="#htmlcaption8" />
       <img src="images/Table/9.jpg" alt="#htmlcaption9" />
       <img src="images/Table/10.jpg" alt="#htmlcaption10" />
       <img src="images/Table/11.jpg" alt="#htmlcaption11" />
       <img src="images/Table/12.jpg" alt="#htmlcaption12" />
       <img src="images/Table/13.jpg" alt="#htmlcaption13" />
       <img src="images/Table/14.jpg" alt="#htmlcaption14" />
       <img src="images/Table/15.jpg" alt="#htmlcaption15" />
       <img src="images/Table/16.jpg" alt="#htmlcaption16" />
       <img src="images/Table/17.jpg" alt="#htmlcaption17" />
       <img src="images/Table/18.jpg" alt="#htmlcaption18" />
       <img src="images/Table/19.jpg" alt="#htmlcaption19" />
       <img src="images/Table/20.jpg" alt="#htmlcaption20" />
       <img src="images/Table/21.jpg" alt="#htmlcaption21" />
            
   </div> 

   <!--Custom navigation buttons on both sides-->
   <div class="group1-Wrapper">
       <a onclick="imageSlider.previous()" class="group1-Prev"></a>
       <a onclick="imageSlider.next()" class="group1-Next"></a>
   </div>

   <div id="sliderborder1" >
   </div>


   <div id="sliderborder2">
      <!-- navigation buttons in the thumbnails bar -->
      <a onclick="imageSlider.previous()" class="group2-Prev"></a>
      <a id='auto' onclick="switchAutoAdvance()"></a>
      <a onclick="imageSlider.next()" class="group2-Next"></a>
   </div>

   </div>

   <script type="text/javascript">
   //The following script is for the group 2 navigation buttons.
        function switchAutoAdvance() {
            imageSlider.switchAuto();
            switchPlayPauseClass();
        }
        function switchPlayPauseClass() {
            var auto = document.getElementById('auto');
            var isAutoPlay = imageSlider.getAuto();
            auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
            auto.title = isAutoPlay ? "Pause" : "Play";
        }
        switchPlayPauseClass();
   </script>

</body>
</html>